<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { getCategoryList, delCategory } from "@/api";
import type { Category } from "@/model";
import CategoryEdit from "./components/CategoryEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref<Category[]>([]);
const oldData = ref<Category[]>([]);
const isShowDialog = ref(false);
const dialogTitle = ref("新增分类");
const category = reactive({
  id: 0,
  name: "",
  pid: -1,
});
const searchForm = reactive({
  name: "",
  level: "0",
});
async function loadCategoryList() {
  const res = await getCategoryList();
  oldData.value = res.data.data;
  convertToTree(oldData.value);
}
function convertToTree(data: Category[]) {
  if (data == undefined) {
    return [];
  }
  var newData: Category[] = [];
  data.forEach((v) => {
    if (v.pid == 0) {
      newData.push(v);
    }
  });
  newData.forEach((v) => {
    const result = data.filter((item) => item.pid == v.id);
    v.children = result;
    v.hasChild = result && result.length > 0 ? true : false;
  });
  tableData.value = newData;
}
function searchCategory() {
  if (searchForm.name == "" && searchForm.level == "0") {
    loadCategoryList();
  } else {
    tableData.value = oldData.value.filter((item: Category) => {
      item.children = [];
      if (searchForm.level == "0") {
        return item.name?.includes(searchForm.name);
      } else if (searchForm.level == "1") {
        return item.name?.includes(searchForm.name) && item.pid == 0;
      } else {
        return item.name?.includes(searchForm.name) && item.pid != 0;
      }
    });
  }
}
function resetForm() {
  searchForm.name = "";
  searchForm.level = "0";
  convertToTree(oldData.value);
}
function addCategory() {
  dialogTitle.value = "新增分类";
  category.id = 0;
  category.name = "";
  category.pid = -1;
  isShowDialog.value = true;
}

function updateCategory(data: Category) {
  dialogTitle.value = "修改分类";
  Object.assign(category, data);
  isShowDialog.value = true;
}
function closeDialog() {
  isShowDialog.value = false;
  loadCategoryList();
}
function deleteCategory(data: Category) {
  if (data.hasChild) {
    ElMessage.warning("该分类下存在二级分类，请先删除二级分类再删除此分类");
  } else {
    ElMessageBox.confirm("确定要删除此分类吗？", {
      closeOnClickModal: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(async () => {
        const res = await delCategory({ id: data.id });
        if (res.data.errno == 0) {
          loadCategoryList();
          resetForm();
          ElMessage.success(res.data.errmsg);
        } else {
          ElMessage.error(res.data.errmsg);
        }
      })
      .catch(() => {});
  }
}
onMounted(() => {
  loadCategoryList();
});
</script>

<template>
  <section class="search">
    <el-form :inline="true">
      <el-form-item label="分类名称">
        <el-input v-model="searchForm.name" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="分类级别">
        <el-select v-model="searchForm.level" style="width: 200px">
          <el-option label="所有" value="0"></el-option>
          <el-option label="一级分类" value="1"></el-option>
          <el-option label="二级分类" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCategory">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
  <section class="category_page">
    <div>
      <el-button type="primary" @click="addCategory">新增分类</el-button>
    </div>
    <div>
      <el-table :data="tableData" row-key="id" style="width: 100%" border>
        <template #empty>暂无数据</template>
        <el-table-column prop="name" label="分类名称"></el-table-column>
        <el-table-column label="分类级别">
          <template #default="scope">
            {{ scope.row.pid == 0 ? "一级分类" : "二级分类" }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="分类编号"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="warning" @click="updateCategory(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleteCategory(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
  <el-dialog v-model="isShowDialog" :title="dialogTitle" width="600">
    <CategoryEdit
      :is-show="isShowDialog"
      :category="category"
      @closeDialog="closeDialog"
    ></CategoryEdit>
  </el-dialog>
</template>

<style scoped>
.category_page,
.search {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px;
  border: 1px solid transparent;
}
.search {
  height: 50px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.search .el-form-item {
  margin-top: 0px;
  margin-bottom: 0px;
}
.category_page > div {
  margin: 20px;
}
</style>
